@charset "UTF-8";
/*
 * @author		DenGo
 * @email		i@dengo.org
 * @link		http://dengo.org
 * @date		2014-05-24
 * @project		HTML5_Player
 * @description	des
 */

/* ----- reset ----- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
button, input, select, textarea {font-size: 100%;}
body,button,input,select,textarea{font: 12px/1.5 'Microsoft YaHei',Arial,"\5b8b\4f53",Tahoma,sans-serif;}
a,a:link,a:visited,a:focus,a:hover,a:active{text-decoration:none;}
fieldset,img{border:0}
ol,ul{list-style:none}
address,caption,cite,code,dfn,em,th,var{font-style:normal; font-weight:normal}
caption,th{text-align:left}
abbr,acronym{border:0}
table {border-collapse:collapse; border-spacing:0;}/* tables still need 'cellspacing="0"' in the markup */
img{ -ms-interpolation-mode:bicubic; }/*for ie7*/
:focus {outline-color: -moz-use-text-color;outline-style: none;outline-width: 0;}
/* ----- reset end ------ */

/* ----- css ----- */
@font-face {
	font-family: 'icon';
	src:url('../fonts/icon.eot?');
	src:url('../fonts/icon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icon.woff?') format('woff'),
		url('../fonts/icon.ttf?') format('truetype'),
		url('../fonts/icon.svg?#icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

body{
	background-color: #F2F2F0;
}
.music_wrap{
	width: 355px;
	height: 350px;
	margin: auto;
	box-shadow: 0px 0px 20px #D8D8D8;
	border-radius: 10px;
}

/*歌手信息*/
.artist_info{
	border-bottom: 1px solid #E3E5E0;
	height: 110px;
	position: relative;
}
.artist_avatar{
	position: absolute;
	top: 17px;
	left: 23px;
}
.artist_avatar img{
	width: 75px;
	height: 75px;
	display: block;
	border-radius: 50px;
	border: 3px solid #BDC4C7;
}
.artist{
	display: inline-block;
	position: absolute;
	top: 26px;
	left: 125px;
	color: #A1A1A1;
}
.artist_name{
	display: inline-block;
	position: absolute;
	top: 44px;
	left: 125px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
	color: #4BA3DC;
}

/*歌曲信息*/
.track{
	height: 80px;
}
.music_name{
	color: #4BA3DC;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	padding-top: 25px;
	margin-bottom: 3px;
}
.music_album{
	color: #A1A1A1;
	text-align: center;
}

.control{
	height: 160px;
	margin-top: 10px;
	position: relative;
}
/*播放模式*/
.option{
	height: 22px;
	font-size: 13px;
	color: #A1A1A1;
}
.time{
	float: left;
	margin-left: 16px;
	line-height: 22px;
}
.shuffle,.repeat,.volume,.list{
	color: #A0A0A0;
	font-family: 'icon';
	font-size: 16px;
	float: right;
	margin-right: 10px;
	cursor: pointer;
}
.list{
	font-size: 20px;
	line-height: 24px;
	color: #4BA3DC;
}

/*音量调节*/
.volume{
	margin-right: 16px;
	color: #4BA3DC;
}
.volume_wrap{
	width: 15px;
	height: 90px;
	position: absolute;
	right: 18px;
	top: -90px;
	z-index: 99;
	cursor: pointer;
	border-radius: 9px;
	background-color: #fff;
	box-shadow: 0 0 10px #D9D9D9;
}
.volume_bar{
	width: 9px;
	height: 80px;
	background-color: #D5D5D5;
	position: absolute;
	border-radius: 9px;
	left: 3px;
	top: 5px;
}
.volume_now{
	width: 9px;
	height: 64px;
	background-color: #4BA3DC;
	position: absolute;
	bottom: 0;
	border-radius: 9px;
}

/*播放进度条*/
.progress_bar{
	width: 324px;
	height: 10px;
	background-color: #E5E5E3;
	border-radius: 5px;
	margin: 3px auto 0;
	position: relative;
	cursor: pointer;
	box-shadow:0px 5px 2px #999 inset;
}
.progress{
	width: 0px;
	height: 10px;
	background-color: #4BA3DC;
	border-radius: 5px;
	position: absolute;
	z-index: 11;
	top: -5px;
}
.buffer{
	width: 0px;
	height: 10px;
	background-color: #D5D5D5;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
	box-shadow:0px 5px 2px #999 inset;
}

/*播放按钮*/
.action_button{
	height: 115px;
	position: relative;
}
.prev,.next,.play,.pause{
	font-family: 'icon';
	color: #4BA3DC;
	text-align: center;
	position: absolute;
	cursor: pointer;
}
.prev:hover,.next:hover,.play:hover,.pause:hover{
	color: #fff;
	background-color: #4BA3DC;
}
.play,.pause{
	font-size: 40px;
	width: 73px;
	height: 73px;
	border: 2px solid #4BA3DC;
	border-radius: 73px;
	line-height: 78px;
	top: 24px;
	left: 139px;
}
.prev,.next{
	font-size: 20px;
	width: 53px;
	height: 53px;
	border: 2px solid #4BA3DC;
	border-radius: 53px;
	line-height: 56px;
}
.prev{
	top: 34px;
	left:52px;
}
.next{
	top: 34px;
	right: 52px;
}

.coder{
	font-family: icon;
	color: #858585;
	text-align: center;
}

.coder span{
	font-size: 14px;
	color: #4BA3DC;
}

.coder a{
	color: #4BA3DC;
}

.hidden{
	display: none;
}